<template>
  <div>
    <div class="batch-set-wrap">
      <div>
        <span>成本比例：</span>
        <InputNumber v-model="costPriceRatio" size="mini" controls-position="right" />
      </div>
      <div class="refer-city-select">
        <span>参照城市：</span>
        <ReferCitySelect
          :value.sync="templateCityUuid"
          :city-options="referCitiesOptions"
          :supply-city-codes="supplyCities.checkedCodes"
          @getCityName="getCityName"
        />
      </div>
      <el-button type="primary" size="mini" @click="handleConfirm">批量设置</el-button>
    </div>
    <div class="select-supply-wrap">
      <div>
        <span>选择供货城市：</span>
        <el-checkbox
          :indeterminate="supplyCities.isIndeterminate"
          v-model="supplyCities.isCheckAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
      </div>
      <el-checkbox-group
        v-model="supplyCities.checkedCodes"
        @change="handleChangeSupplyCity"
      >
        <el-checkbox
          v-for="city in supplyCitiesOptions"
          :label="city.cityCode"
          :key="city.cityCode"
          >{{ city.cityName }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>
<script>
import InputNumber from '@/components/inputNumber/inputNumber';
import ReferCitySelect from './ReferCitySelect';
export default {
  components: {
    InputNumber,
    ReferCitySelect
  },
  props: {
    referCitiesOptions: {
      type: Array,
      default: () => []
    },
    supplyCitiesOptions: {
      type: Array,
      default: () => []
    },
    checkedSupplyCityCodes: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      costPriceRatio: null, // 成本比例
      templateCityUuid: '', // 参照城市编码
      templateCityName: '', // 当前参照城市名称
      supplyCities: {
        isIndeterminate: false,
        isCheckAll: true, // 是否全选
        checkedCodes: []
      },
    }
  },
  watch: {
    checkedSupplyCityCodes: {
      handler (newCodes) {
        this.supplyCities.checkedCodes = newCodes
      },
      immediate: true
    }
  },
  methods: {
    // 供货城市选择是否供货
    handleChangeSupplyCity (codeList) {
      const checkedCount = codeList.length
      this.supplyCities.checkedCodes = codeList
      this.supplyCities.isCheckAll = checkedCount === this.supplyCitiesOptions.length
      this.supplyCities.isIndeterminate = checkedCount > 0 && checkedCount < this.supplyCitiesOptions.length
      if (!codeList.includes(this.templateCityUuid)) this.templateCityUuid = ''
      this.updateSupplyCities()
    },
    // 全选供货城市列表
    handleCheckAllChange (val) {
      const supplyCityCodeList = this.supplyCitiesOptions.map(item => item.cityCode)
      this.supplyCities.checkedCodes = val ? supplyCityCodeList : [];
      this.isIndeterminate = false
      if (!val) this.templateCityUuid = ''
      this.updateSupplyCities()
    },
    // 更新供货城市
    updateSupplyCities () {
      this.$emit('update:checkedSupplyCityCodes', this.supplyCities.checkedCodes)
      this.$emit('updateSupplyCities')
    },
    // 确定
    handleConfirm () {
      const data = {
        costPriceRatio: this.costPriceRatio,
        templateCityUuid: this.templateCityUuid,
        templateCityName: this.templateCityName
      }
      this.$emit('batchSet', data)
    },
    // 获取当前所选城市信息
    getCityName (templateCityName) {
      this.templateCityName = templateCityName
    },
    // 清空状态
    clearAllState () {
      this.costPriceRatio = null
      this.templateCityUuid = '' // 参照城市编码
      this.templateCityName = '' // 当前参照城市名称
      this.supplyCities = {
        isIndeterminate: false,
        isCheckAll: true, // 是否全选
        checkedCodes: []
      }
    }
  }
}
</script>
<style lang="less" scoped>
.batch-set-wrap {
  display: flex;
  align-items: center;
  .refer-city-select {
    margin-left: 20px;
    div {
      width: 55%;
    }
  }
  .el-button {
    margin-left: -30px;
  }
}
.select-supply-wrap {
  div {
    margin: 15px 0;
  }
}
</style>
